/*
 * Author： Lee
 * Create Time: 2018-02-01
 * Description: 水平左右泵机,管道内水流颜色自定义，长度自定义，高度自定义。
 * CopyRight:
 * 利用整体状态去控制管道是空还是有水流
 * */
import React, { Component } from 'react';

import './index.css';


export default class Pump extends Component {
  constructor(props) {
    super(props);
    console.log('Pump props,', this.props);
    /*
         * * props 参数说明
         * x：相对位置x坐标
         * y: 相对位置y坐标
         * width： 宽度
         * height：高度
         * color: 水流颜色
         * 管道的默认颜色 #949494
         * state状态表示，是否有水流, 默认颜色： #1830fb
         * */
    this.state = {
      work: this.props.work ? this.props.work : false,
    };
  }

  render() {
    return (
      <svg className="PumpBox" label={this.props.label ? this.props.label : 'Pump'} x={ this.props.x ? this.props.x : "1600"} y={ this.props.y ? this.props.y : "875"} width={ this.props.width ? this.props.width :"150"} height={ this.props.height ? this.props.height : "150"}>
        <svg className="PumpContent" preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200">
          <radialGradient cx="30%" cy="30%" r="100%" fx="30%" fy="30%">
            <stop offset="-100%" stopColor="#303030">
            </stop>
            <stop offset="0%" stopColor="#D0D0D0">
            </stop>
            <stop offset="100%" stopColor="#303030">
            </stop>
          </radialGradient>
          <radialGradient cx="70%" cy="70%" r="80%" fx="70%" fy="70%">
            <stop offset="-100%" stopColor="#303030">
            </stop>
            <stop offset="0%" stopColor="#D0D0D0">
            </stop>
            <stop offset="100%" stopColor="#303030">
            </stop>
          </radialGradient>
          <radialGradient cx="70%" cy="70%" r="150%" fx="70%" fy="70%">
            <stop offset="-150%" stopColor="#E7A6FF">
            </stop>
            <stop offset="0%" stopColor="#BB00FF">
            </stop>
            <stop offset="150%" stopColor="#E7A6FF">
            </stop>
          </radialGradient>
          <circle cx="50%" cy="50%" r="50%" fill="#949494">
          </circle>
          <circle cx="50%" cy="50%" r="35%" fill="#949494">
          </circle>
          <g>
            <circle cx="50%" cy="50%" r="35%" fill={ this.state.work && this.props.color ? this.props.color : '#1830fb'}>
            </circle>
          </g>
          <g transform="">
            <path transform="translate(100, 100)" d="m 55.842,-4.497 1.402,-0.113 3.741,0.613 5.198,2.175 0,3.644 -5.198,2.175 -3.741,0.613 -1.402,-0.113 -0.739,5.612 1.384,0.254 3.454,1.56 4.459,3.447 -0.943,3.519 -5.585,0.756 -3.771,-0.376 -1.326,-0.473 -2.166,5.231 1.271,0.603 2.933,2.401 3.414,4.483 -1.821,3.156 -5.59,-0.716 -3.546,-1.34 -1.158,-0.799 -3.446,4.491 1.072,0.912 2.211,3.078 2.138,5.214 -2.577,2.577 -5.214,-2.138 -3.078,-2.211 -0.912,-1.072 -4.491,3.446 0.799,1.158 1.34,3.546 0.716,5.59 -3.156,1.821 -4.483,-3.414 -2.401,-2.933 -0.603,-1.271 -5.231,2.166 0.473,1.326 0.376,3.771 -0.756,5.585 -3.519,0.943 -3.447,-4.459 -1.56,-3.454 -0.254,-1.384 -5.612,0.739 0.113,1.402 -0.613,3.741 -2.175,5.198 -3.644,0 -2.175,-5.198 -0.613,-3.741 0.113,-1.402 -5.612,-0.739 -0.254,1.384 -1.56,3.454 -3.447,4.459 -3.519,-0.943 -0.756,-5.585 0.376,-3.771 0.473,-1.326 -5.231,-2.166 -0.603,1.271 -2.401,2.933 -4.483,3.414 -3.156,-1.821 0.716,-5.59 1.34,-3.546 0.799,-1.158 -4.491,-3.446 -0.912,1.072 -3.078,2.211 -5.214,2.138 -2.577,-2.577 2.138,-5.214 2.211,-3.078 1.072,-0.912 -3.446,-4.491 -1.158,0.799 -3.546,1.34 -5.59,0.716 -1.821,-3.156 3.414,-4.483 2.933,-2.401 1.271,-0.603 -2.166,-5.231 -1.326,0.473 -3.771,0.376 -5.585,-0.756 -0.943,-3.519 4.459,-3.447 3.454,-1.56 1.384,-0.254 -0.739,-5.612 -1.402,0.113 -3.741,-0.613 -5.198,-2.175 0,-3.644 5.198,-2.175 3.741,-0.613 1.402,0.113 0.739,-5.612 -1.384,-0.254 -3.454,-1.56 -4.459,-3.447 0.943,-3.519 5.585,-0.756 3.771,0.376 1.326,0.473 2.166,-5.231 -1.271,-0.603 -2.933,-2.401 -3.414,-4.483 1.821,-3.156 5.59,0.716 3.546,1.34 1.158,0.799 3.446,-4.491 -1.072,-0.912 -2.211,-3.078 -2.138,-5.214 2.577,-2.577 5.214,2.138 3.078,2.211 0.912,1.072 4.491,-3.446 -0.799,-1.158 -1.34,-3.546 -0.716,-5.59 3.156,-1.821 4.483,3.414 2.401,2.933 0.603,1.271 5.231,-2.166 -0.473,-1.326 -0.376,-3.771 0.756,-5.585 3.519,-0.943 3.447,4.459 1.56,3.454 0.254,1.384 5.612,-0.739 -0.113,-1.402 0.613,-3.741 2.175,-5.198 3.644,0 2.175,5.198 0.613,3.741 -0.113,1.402 5.612,0.739 0.254,-1.384 1.56,-3.454 3.447,-4.459 3.519,0.943 0.756,5.585 -0.376,3.771 -0.473,1.326 5.231,2.166 0.603,-1.271 2.401,-2.933 4.483,-3.414 3.156,1.821 -0.716,5.59 -1.34,3.546 -0.799,1.158 4.491,3.446 0.912,-1.072 3.078,-2.211 5.214,-2.138 2.577,2.577 -2.138,5.214 -2.211,3.078 -1.072,0.912 3.446,4.491 1.158,-0.799 3.546,-1.34 5.59,-0.716 1.821,3.156 -3.414,4.483 -2.933,2.401 -1.271,0.603 2.166,5.231 1.326,-0.473 3.771,-0.376 5.585,0.756 0.943,3.519 -4.459,3.447 -3.454,1.56 -1.384,0.254 z" fill="#949494">
            </path>
            {
              this.state.work ?
                <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="4s" repeatCount="indefinite">
                </animateTransform>
                : ''
            }
          </g>
        </svg>
      </svg>
    );
  }
}
